<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Full Page Layout with Menu Navigation - Example</title>
<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>
<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/menu/assets/skins/sam/menu.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/resize/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/layout/assets/skins/sam/layout.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/history/history-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>

<style>
    #thingMenuBar {
        position: static;
    }

    /*
        For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
        setting the "zoom" property to 1.  This ensures that the selected state of
        MenuItems doesn't get dropped when the user mouses off of the text node of
        the anchor element that represents a MenuItem's text label.
    */

    #thingMenuBar .yuimenuitemlabel {
        _zoom: 1;
    }

    #thingMenuBar .yuimenu .yuimenuitemlabel {
        _zoom: normal;
    }
    /*
        Turn off the border on the top unit since Menu has it's own border
    */
    .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd {
        border: none;
    }
    /*
        Change some of the Menu colors
    */
    .yui-skin-sam .yuimenu .bd {
        background-color: #F2F2F2;
    }
    #thingMenuBar .bd {
        border: none;
    }
    #thingMenuBar .bd .first-of-type .bd {
        border: 1px solid #808080;
    }
</style>

</head>

<body class=" yui-skin-sam">
<div id="top1">
    <div id="thingMenuBar" class="yuimenubar yuimenubarnav">
        <div class="bd">
            <ul class="first-of-type">

                <li class="yuimenubaritem first-of-type">
                    <a class="yuimenubaritemlabel" href="#communication">Communication</a>
                </li>
                <li class="yuimenubaritem">
                    <a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
                </li>
                <li class="yuimenubaritem">

                    <a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>

                </li>
                <li class="yuimenubaritem">
                    <a class="yuimenubaritemlabel" href="#">Information</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div id="bottom1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p></div>
<div id="right1">
    <b>Right 1</b>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
</div>
<div id="left1">
    <b>Left 1</b>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
</div>
<div id="center1">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>

</div>


<script>
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;


        var initTopMenu = function() {
                /*
                     Instantiate a MenuBar:  The first argument passed to the
                     constructor is the id of the element in the page
                     representing the MenuBar; the second is an object literal
                     of configuration properties.
                */

                var oMenuBar = new YAHOO.widget.MenuBar("thingMenuBar", {
                                                            autosubmenudisplay: true,
                                                            hidedelay: 200,
                                                            lazyload: false,
                                                            effect: {
                                                                effect: YAHOO.widget.ContainerEffect.FADE,
                                                                duration: 0.25
                                                            }
                                                        });

                /*
                     Define an array of object literals, each containing
                     the data necessary to create a submenu.
                */

                var aSubmenuData = [

                    {
                        id: "communication",
                        itemdata: [
                            { text: "360"},
                            { text: "Alerts"},
                            { text: "Avatars"},
                            { text: "Groups"},
                            { text: "Internet Access"},
                            {
                                text: "PIM",
                                submenu: {
                                            id: "pim",
                                            itemdata: [
                                                { text: "Yahoo! Mail"},
                                                { text: "Yahoo! Address Book"},
                                                { text: "Yahoo! Calendar"},
                                                { text: "Yahoo! Notepad"}
                                            ]
                                        }

                            },
                            { text: "Member Directory"},
                            { text: "Messenger"},
                            { text: "Mobile"},
                            { text: "Flickr Photo Sharing"},
                        ]
                    },

                    {
                        id: "shopping",
                        itemdata: [
                            { text: "Auctions"},
                            { text: "Autos"},
                            { text: "Classifieds"},
                            { text: "Flowers & Gifts"},
                            { text: "Real Estate"},
                            { text: "Travel"},
                            { text: "Wallet"},
                            { text: "Yellow Pages"}
                        ]
                    },

                    {
                        id: "entertainment",
                        itemdata: [
                            { text: "Fantasy Sports"},
                            { text: "Games"},
                            { text: "Kids"},
                            { text: "Music"},
                            { text: "Movies"},
                            { text: "Radio"},
                            { text: "Travel"},
                            { text: "TV"}
                        ]
                    },

                    {
                        id: "information",
                        itemdata: [
                            { text: "Downloads"},
                            { text: "Finance"},
                            { text: "Health"},
                            { text: "Local"},
                            { text: "Maps & Directions"},
                            { text: "My Yahoo!"},
                            { text: "News"},
                            { text: "Search"},
                            { text: "Small Business"},
                            { text: "Weather"}
                        ]
                    }
                ];


                /*
                     Subscribe to the "beforerender" event, adding a submenu
                     to each of the items in the MenuBar instance.
                */

                oMenuBar.subscribe("beforeRender", function () {

                    if (this.getRoot() == this) {

                        this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
                        this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                        this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
                        this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

                    }

                });


                /*
                     Call the "render" method with no arguments since the
                     markup for this MenuBar instance is already exists in
                     the page.
                */

                oMenuBar.render();

				function onClick(p_sType, p_aArgs) {

					var oEvent = p_aArgs[0],    // DOM Event
					oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance

					if (oMenuItem) {
						console.debug(oMenuItem.cfg.getProperty("text"));
					}
				}
			    // Subscribe to the "click" event

			    oMenuBar.subscribe("click", onClick);

        };



    Event.onDOMReady(function() {
        var layout = new YAHOO.widget.Layout({
            units: [
                { position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 1 },
                { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
                { position: 'bottom', height: 30, body: 'bottom1' },
                { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '0' },
                { position: 'center', body: 'center1', gutter: '4 4' }
            ]
        });

        layout.on('render', function() {
            YAHOO.util.Event.onContentReady("thingMenuBar", initTopMenu);
        });

        layout.render();
    });
})();

</script>
</body>
</html>
